<template>
  <div>
    <h2>BABA有存款: {{ money }}</h2>
    <!-- <button @click="borrowFromXM(100)">找小明借钱100</button><br />
    <button @click="borrowFromXH(150)">找小红借钱150</button><br />
    <button @click="borrowFromAll(200)">找所有孩子借钱200</button><br /> -->
     <button @click="borrowFrom(100)">找小明借钱100</button><br />
    <button @click="borrowFrom(150)">找小红借钱150</button><br />
    <button @click="borrowFrom(200)">找所有孩子借钱200</button><br />

    <br />
    <!-- ref:可以获取到真实DOM节点，可以获取相应组件的实例VC -->
    <!-- ref也算在一种通信手段:在父组件中可以获取子组件(属性|方法) -->
    <Son ref="son" />

    <br />
    <Daughter ref="dau" />
  </div>
</template>

<script>
import Son from "./Son";
import Daughter from "./Daughter";

export default {
  name: "ChildrenParentTest",
  data() {
    return {
      money: 1000,
    };
  },
  components: {
    Son,
    Daughter,
  },

  // methods: {
  //   borrowFromXM(money){
  //     this.money += money;
  //     this.$refs.son.money -= money;
  //   },
  //   borrowFromXH(money){
  //     this.money += money;
  //     this.$refs.dau.money -= money;
  //   },
  //   borrowFromAll(money){
  //     this.money += money * 2;
  //     // this.$children是数组
  //     this.$children.forEach((item) => {
  //       item.money -= money;
  //     })
  //   }
  // },

  methods: {
    borrowFrom(money){
      if(money == 100){
        this.money += money;
        this.$refs.son.money -= money;
      }else if(money == 150){
        this.money += money;
        this.$refs.dau.money -= money;
      }else{
        this.money += money * 2;
        this.$children.forEach((item) => {
          item.money -= money;
      })
      }
    }
  },
};
</script>

<style>
</style>
